<template>
<div class="pagination-cp box-shadow_2">
    <el-pagination
        class="el-pagination"
        background
        :pager-count='5'
        :hide-on-single-page="true"
        layout="prev, pager, next"
        :current-page="currentPage"
        @current-change="onChange($event)"
        :page-size="pageSize"
        :page-count="pageCount">
    </el-pagination>
    <div class="back-top">
        <i 
            class="el-icon-top" 
            @click="simpleRoll">
        </i>
    </div>
</div>
</template>

<script>
/*
 公共的分页组件
 */
import {simpleRoll} from '@/common/RollTolls';
export default {
    props:{
        pageSize:{ //每页显示条目个数
            type:Number,
            default:1,
        },
        pageCount:{ //总页数
            type:Number,
            default:1,
        },
        currentPage:{ //当前页
            type:Number,
            default:1,
        },
    },
    methods:{
        simpleRoll,
        onChange(currentPage){
            this.$emit('currentChange',currentPage);
        },
    },
}
</script>
<style lang="scss" scoped>
.pagination-cp{
    width:fit-content;
    background-color: white;
    padding: 5px 0;
    border-radius: 5px;
    display: flex;
    align-items: center;
    .back-top{
        margin: 0 10px;
        display: flex;
        align-items: center;
        i{
            font-weight: bold;
            cursor: pointer;
            transition: all 0.2s;
            &:hover{
                color: #ff6161;
            }
        }
    }
    .el-pagination{
        padding: 0px;
        display:flex;
        justify-content:center;
        flex-wrap:wrap;
        overflow: hidden;
        /deep/.el-pager li:not(.disabled).active{
            background-color: #ffd966;
            color: #8e7f00;
        }
        /deep/.el-pager li:not(.disabled):hover {
            color: #ff6161;
        }
    }
}
</style>

